<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>视频上面的按钮</title>
    <!-- <link rel="stylesheet" type="text/css" href="./../../css/video.css" /> -->
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />

    <style>
    body{
      background-color: rgba(0,0,0,0);
      /*background-color: red;*/
    }
    .jindutiao {
        position: absolute;
        left: -260px;
        width:520px;
        margin-left: 50%;
    }

    .aui-progress-bar {
        position: relative;
        background-color: #fff;
    }

    .aui-progress {
        overflow: inherit;
    }
    .aui-content-padded {
        margin: 4%;
    }
    .aui-progress-bar:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        /*background-color: red;*/
        right: -3px;
        top: -4px;
        /*border: 1px solid red;*/
        border-radius: 50%;
        background-color: #fff;
    }
    .beisunum{
      color: #fff;
      margin-top:10px;
      font-size: 14px;
    }
    .beisunum span{
      display: inline-block;
      /*width:18.5%;*/
      text-align: center;
      margin-left: 16.5%;
    }
    .aui-content-padded{
      margin-top: 6px;
      margin-left: 15px;
      margin-right: 15px;
      margin-bottom: 0px;
    }
    .beisunum span:first-child{
        margin-left: 0%;
    }
    </style>
</head>

<body>
    <div id="vm">
      <div class="jindutiao">
          <div class="aui-content-padded">
              <div class="aui-progress aui-progress-xxs">
                  <div class="aui-progress-bar"  :style="'width:'+ width2+'%;'"></div>
              </div>
              <div class="beisunum">
                <span @click="setbeisu(0.5)">X0.5</span>
                <span @click="setbeisu(0.75)">X0.75</span>
                <span @click="setbeisu(1)">X1</span>
                <span @click="setbeisu(1.25)">X1.25</span>
                <span @click="setbeisu(1.5)">X1.5</span>
              </div>
          </div>
      </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el: '#vm',
    data: {
        width2:50,
    },
    created: function() {
        var _this = this;
        apiready = function() {
            _this.init();
            api.parseTapmode();
            if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                    FastClick.attach(document.body);
                }, false);
            }
        }
    },
    computed: {
      jinduwidth:function () {
        return this.width2
      }
    },
    methods: {
        init: function() {
        },
        back(){
          api.sendEvent({
              name: 'qiehuanfullscreen1',
          });
        },
        setbeisu:function(ret) {
              if (ret=='0.5') {
              this.width2 =0.3
              }else if (ret=='0.75') {
              this.width2 =28
              }else if (ret=='1') {
              this.width2 =50
              }else if (ret=='1.25') {
                this.width2 =73
              }else if (ret=='1.5') {
              this.width2 =100.3
              }
              api.sendEvent({
                  name: 'setbeisu',
                  extra: {
                      videobeisu:ret,
                  }
              });
        }
    }
})
</script>

</html>
